<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="script/jquery-1.10.min.js">
// <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<!-- <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> -->
<link rel="stylesheet" href="script/bootstrap-3.3.7.min.css">
<!-- <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script> -->
<script src="script/bootstrap-3.3.7.min.js"></script>

</script>
<script>
$(document).ready(function(){

    function table_append(dom,data){

            $(dom + "  tbody").empty();  //注意tbody要有空格，字符串拼接不能接着，清空表格

            $.each(data, function(index, obj) { // 通用方法，表格添加数据
        // alert(index +"-"+obj.tagName); index序号,

            $(dom + " tbody").append("<tr><td>"+index+"</td>\
                   <td>"+obj.name+"</td>\
                   <td>"+obj.tag+"</td>\
                   <td>"+obj.create_user+"</td>\
                   <td>"+obj.total_run_count+"</td>\
                   <td>"+obj.app_name+"</td>\
                   <td>"+obj.create_time+"</td>\
                   <td>"+obj.last_run_time+"</td>\
                   </tr>"
                   )

            $(dom + "  tr:not(:first)").css("color","red"); //选择器,除第一行以外 红色
            });

            //样例数据
            var json_data_ex= {"data": [{"name": "\u6d4b\u8bd5\u4efb\u52a1", "tag": "\u6d4b\u8bd5\u4efb\u52a1\u6807\u7b7e", "create_user": "org", "total_run_count": 36, "create_time": "2018-06-04-15:19", "app_name": "\u4e91\u7ba1\u5e73\u53f0\u73af\u5883", "id": 7, "last_run_time": "2018-06-05 10:23"}], "success": true}

    }

	$("#reload_table").click(function(){  //点击事件

    $.ajax({
        type: 'get',
        url: 'http://127.0.0.1:8000/app_center/capsule_list',
    //如果是json data 加入 contentType: 'application/json;charset=utf-8',
        data:    {app_id:1}, //get 参数

        success: function (json_data,status) { //返回json结果
          // alert("数据：" + data + "\n状态：" + status);
          if (json_data.success ){
                table_append(("#t"),json_data.data)
                table_append(("#t_model"),json_data.data)
          }
          else{
            alert("请求数据异常,使用样例数据")
            table_append(("#t"),json_data_ex.data)
            table_append(("#t_model"),json_data.data)
          }
        },

        error: function (xhr,status) { //返回json结果
          alert("错误数据：" + xhr + "\n 状态：" + status  +"\n 使用样例数据");
          table_append(("#t"),json_data_ex.data)
          table_append(("#t_model"),json_data.data)
        }

        });

      $('#myModal').modal('hide')
	});
});
</script>
</head>
<body>

<!-- <button>执行按钮</button> -->


<h2>模态框（Modal）插件事件</h2>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  开始演示模态框
</button>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title" id="myModalLabel">
          模态框（Modal）标题
        </h4>
      </div>
      <div class="modal-body">
        <h4>点击关闭按钮检查事件功能,刷新表格(填充表格)</h4>

        <table id="t_model" class="table">
        <thead>
        <th>序号</th>
        <th>任务名称</th>
        <th>任务标签</th>
        <th>创建用户</th>
        <th>统计次数</th>
        <th>应用名称</th>
        <th>创建时间</th>
        <th>修改时间</th>
        </thead>

         <tbody>
         </tbody>
        
        </table>


      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">
          关闭
        </button>

        <button id = "reload_table" type="button" class="btn btn-primary">
          刷新表格(框内外都渲染)后 关闭
        </button>
      
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

        <table id="t" class="table">
        <thead>
        <th>序号</th>
        <th>任务名称</th>
        <th>任务标签</th>
        <th>创建用户</th>
        <th>统计次数</th>
        <th>应用名称</th>
        <th>创建时间</th>
        <th>修改时间</th>
        </thead>

         <tbody>
         </tbody>
        
        </table>


</body>


<script>
   $(function () { $('#myModal').modal('hide')});
</script>

<script>
   $(function () { $('#myModal').on('hide.bs.modal', function () {
      alert('嘿，我听说您喜欢模态框...');})
   });
</script>

</html>
